<template>
    <div>
        <div class="writerPageBox">
            <div class="writerPageBox_BG_Img">
                <div class="WPB_Img">
                    <img src="" alt="">
                </div>
                <div class="WPB_name">
                    <span class="WPBN_name">月北</span>
                    <span class="WPBN_tag">
                        <span>作者</span>
                    </span>
                </div>
                <div class="WPB_back">
                    <span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span>
                </div>
            </div>
        </div>
        <div class="writersAndTheirWorks">
            <div class="SearchContainer">
                <div class="WATW_Title">
                    <span>TA的作品<span class="WATW_quantity">(3本)</span></span>
                </div>
                <div class="WATW_Box">
                    <div class="WATWB_Img">
                        <img src="" alt="">
                    </div>
                    <div class="WATWB_Text">
                        <div class="WATWBT_name">
                            <span>隔壁同学</span>
                            <span class="WATWBTN_grade">9.1<span>分</span></span>
                        </div>
                        <div class="WATWB_Introduce">
                            <p>畅销作者月北最新甜宠之作,看呆萌女主如何花式倒追宠邻家高颜值学霸</p>
                        </div>
                        <div class="WATWB_Tag">
                            <span class="WATWBT_left"><span>完结</span><span>23万字</span></span>
                            <span class="WATWBT_right"><span>甜宠</span><span>青梅竹马</span></span>
                        </div>
                    </div>
                </div>
                <div class="WATW_Box">
                    <div class="WATWB_Img">
                        <img src="" alt="">
                    </div>
                    <div class="WATWB_Text">
                        <div class="WATWBT_name">
                            <span>隔壁同学</span>
                            <span class="WATWBTN_grade">9.1<span>分</span></span>
                        </div>
                        <div class="WATWB_Introduce">
                            <p>畅销作者月北最新甜宠之作,看呆萌女主如何花式倒追宠邻家高颜值学霸</p>
                        </div>
                        <div class="WATWB_Tag">
                            <span class="WATWBT_left"><span>完结</span><span>23万字</span></span>
                            <span class="WATWBT_right"><span>甜宠</span><span>青梅竹马</span></span>
                        </div>
                    </div>
                </div>
                <div class="WATW_Box">
                    <div class="WATWB_Img">
                        <img src="" alt="">
                    </div>
                    <div class="WATWB_Text">
                        <div class="WATWBT_name">
                            <span>隔壁同学</span>
                            <span class="WATWBTN_grade">9.1<span>分</span></span>
                        </div>
                        <div class="WATWB_Introduce">
                            <p>畅销作者月北最新甜宠之作,看呆萌女主如何花式倒追宠邻家高颜值学霸</p>
                        </div>
                        <div class="WATWB_Tag">
                            <span class="WATWBT_left"><span>完结</span><span>23万字</span></span>
                            <span class="WATWBT_right"><span>甜宠</span><span>青梅竹马</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    }
}
</script>

<style lang="less">
.SearchContainer{
    width: 91%;
    margin: 0px auto;
}
.writerPageBox{
    background-color: white;
    padding: 200px 0px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    .writerPageBox_BG_Img{
        text-align: center;
        position: relative;
        .WPB_Img{
            position: absolute;
            left: 38%;
            bottom: 40px;
            width: 90px;
            height: 90px;
            background-color: yellow;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .WPB_name{
            display: flex;
            justify-content:center;
            .WPBN_name{
                font-weight: bold;
                font-size: 18px;
                margin-right: 6px;
            }
            .WPBN_tag{
                padding-top: 3px;
                span{
                    font-size: 13px;
                    background-color: #fcca06;
                    padding: 2px 4px;
                    border-radius: 4px;
                }
            }
        }
        .WPB_back{
            position: absolute;
            bottom: 185px;
            left: 10px;
            span{
                font-size: 24px;
                font-weight: bold;
            }
        }
    }
}
.writersAndTheirWorks{
    background-color: #fff;
    padding: 10px 0px;
    .WATW_Title{
        padding: 10px 0px;
        span{
            font-size: 18px;
            font-weight: bold;
        }
        span.WATW_quantity{
            font-size: 16px;
            margin-left: 10px;
        }
    }
    .WATW_Box{
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        .WATWB_Img{
            width: 80px;
            height: 105px;
            background-color: lightgreen;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .WATWB_Text{
            width: 73%;
            .WATWBT_name{
                display: flex;
                justify-content: space-between;
                font-size: 17px;
                span{
                    font-weight: bold;
                }
                span.WATWBTN_grade{
                    color:#fcb63d ;
                    span{
                        font-size: 12px;
                        font-weight: normal;
                    }
                }
            }
            .WATWB_Introduce{
                font-size: 14px;
                color: #aaa;
                width: 100%;
                margin-top: 5px;
                p{
                    width: 100%;
                    line-height: 24px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
            .WATWB_Tag{
                display: flex;
                justify-content: space-between;
                color: #aaa;
                margin-top: 10px;
                .WATWBT_left{
                    font-size: 14px;
                    span{
                        margin-right: 10px;
                    }
                }
                .WATWBT_right{
                    font-size: 12px;
                    span{
                        margin-left: 5px;
                        border: 1px solid #ccc;
                        padding: 2px 4px;
                    }
                }
            }
        }
    }
}
</style>